<template>
  <div>
    <van-nav-bar title="用户登录" left-arrow @click-left="onClickLeft" />
    <van-form validate-first>
      <van-field
        v-model="uname"
        label="用户名"
        placeholder="用户名"
        :rules="[{ pattern, required: true, message: '请填写正确用户名' }]"
      />
      <van-field
        v-model="pwd"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ pattern, required: true, message: '请填写正确密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" @click="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uname: "",
      pwd: "",
      pattern: /^[A-Za-z0-9_\u4e00-\u9fa5]{4,16}$/,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("me");
    },
    submit() {    
        //发送登录请求
        this.axios.post("/login", `uname=${this.uname}&pwd=${this.pwd}`)
          .then((res) => {
            console.log(res)
            if (res.data.code == 200) {
              //提交vuex，更新用户信息
              this.$store.commit("updateUname", this.uname);
               this.$store.commit("updateImg", res.data.result.img);
               console.log(this.uname);
               console.log(res.data.result.img);
              //弹窗跳转
              Toast("登录成功");
              this.$router.push("/me");
            } else {
              //登录失败
              Toast("账号或密码输入错误,请重新填写信息")
            }
          });
      }
   
  },
};
</script>

<style scoped>
::v-deep .van-icon-arrow-left:before {
  color: black;
}
.van-button--block {
  margin-top: 10vh;
  display: block;
  width: 100%;
}
.van-button--info {
  color: #fff;
  background-color: #a7d500;
  border: 0;
}
</style>